<template>
  <div class="my_contain">
    <!-- 获取 vuex 中的状态对象 this.$store.state.count -->
    <p>{{count}}</p>
    <button @click="increment({ amount: 10 })">改变count值</button>
  </div>
</template>

<script>
// mapState 辅助函数
// 在组件中提交 Mutaion 可以使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  // 写法一：
  // computed: {
  //   count() {
  //     return this.$store.state.count
  //   }
  // },
  // 写法二：
  // computed: mapState({
  //   count: state => state.count
  // }),
  // 推荐写法三：
  computed: {
    ...mapState([
      'count',
    ]),
  },
  methods: {
    add() {
      // 调用 store.commit 方法触发状态变更
      this.$store.commit('increment', {
        amount: 10
      })
    },
    ...mapMutations([
      // mapMutations 支持载荷，将 this.increment(payload) 映射为 this.$store.commit('increment', payload)
      'increment'
    ])
  },
}
</script>

<style scoped>

</style>